<template>
	<view class="index">
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
			<!-- 顶部搜索 -->
			<diySearch></diySearch>
			<!-- 广告 -->
			<view class="swiper-content">
				<swiper class="swiper" circular="true" :indicator-dots="true" :autoplay="true" interval="2000">
					<swiper-item v-for="(item,index) in advertisementList" :key="index" @click="gotoUrl(item.link)">
						<block v-for="(i,k) in item.image" :key="k">
							<image :src="i" mode="widthFix"></image>
						</block>
					</swiper-item>
				</swiper>
			</view>
			<!-- 提示 -->
			<view class="swiperBox">
				<text class="iconfont icon-labagonggao-fill"></text>
				<view class="notice-text">
					<u-notice-bar bg-color="#fff" :volume-icon="false" mode="horizontal" :list="conent"></u-notice-bar>
				</view>
			</view>
			<view class="category-scroll">
				<view class="categoryItem" v-for="(item,index) in indexTabbar" :key="index" @click="gotowai(item)">
					<image :src="item.icon" mode="" @error="errimg(index)"></image>
					<view class="categoryName">{{item.name}}</view>
				</view>
			</view>
			<!-- 类别 -->
			<view class="category">
				<view class="categoryItem" v-for="(item,index) in categoryList" :key="index" @click="$util.redirectTo('/pages/tasklist/tasklist',{id:item.id })">
					<view class="box">
						<view class="categoryName">{{item.title}}</view>
						<view class="categoryText">{{item.text}}</view>
					</view>
					<image :src="item.image" mode="" @error="errimg(index)"></image>
				</view>
			</view>
			<!-- 全部任务 -->
			<view class="taskTitle" ref='button'>
				<text class="taskName">全部任务</text>
			</view>
			<!-- 任务展示 -->
			<diyTask :taskSwitch='taskSwitch' :taskList="taskList"></diyTask>
		</mescroll-body>
		<!-- 底部导航 -->
		<diyTabBar value="index"></diyTabBar>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>
`
<script>
	import diyTabBar from '../../component/diy-nav/diy-tabbar.vue'
	import diySearch from '../../component/diy-search/diy-search.vue'
	import diyTask from '../../component/diy-task/diy-task.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default {
		components: {
			diyTabBar,
			diySearch,
			diyTask,
			loadingCover
		},
		mixins: [MescrollMixin],
		data() {
			return {
				//广告
				advertisementList: [],
				//列表展示的数据
				taskList: [],
				upOption: {
					page: {
						num: 0,
						size: 10
					}
				},
				//上拉参数配置
				downOption: {
					auto: false,
					page: {
						num: 0,
						size: 10
					}
				}, 
				//下拉参数配置
				// 任务类别
				categoryList: [],
				//任务展开方式切换
				taskSwitch: false,
				//公告
				warning: [],
				indexTabbar: [],
				conent: []
			}
		},
		onLoad(option) {
			this.getdata();
			//#ifdef APP
			uni.hideTabBar()
			//#endif
			setTimeout(()=>{
				if(this.$refs.loadingCover) this.$refs.loadingCover.hide();
				// uni.clearStorageSync();
			},1000)
		},
		onShow() {
			this.$nextTick(()=>{
				if(this.mescroll) this.mescroll.resetUpScroll()
			})
		},
		computed: {
			newCategoryList() {
				const num = this.categoryList.length % 3;
				return this.categoryList.splice(this.categoryList.length - num, num)
			}
		},
		methods: {
			gotoUrl(url) {
				// #ifdef H5
				window.location.href = url;
				// #endif
				// #ifdef APP
				plus.runtime.openURL(url);
				// #endif
			},
			removeText(text) {
				text = text.replace(/<\/?[^>]*>/g, ""); //去除标签
				text = text.replace(/\s*/g, ""); //去空格
				text = text.replace(/[|]*\n/, ""); //去除行尾空格
				text = text.replace(/[ ]|[&nbsp;]/g, ""); //去除nbsp
				return text
			},
			// 初始化获取轮播数据
			getdata() {
				this.$http.sendrequest('/silde/IndexSilde').then(res => {
					if (res.code == 1) {
						this.advertisementList = res.data;
					}
				})
				this.$http.sendrequest('/index/NoticeId', {id: 1}, {tokenJudge: true}).then(res => {})
				this.$http.sendrequest('/task/TaskSortList').then(res => {if (res.code == 1) {this.categoryList = res.data;}})
				this.$http.sendrequest('/index/Notice').then(res => {
					if (res.code == 1) {
						this.warning = res.data;
						// this.conent = res.data[0].context;
						res.data.forEach((item) => {
							this.conent.push(this.removeText(item.context))
						})
					}
				})
				this.$http.sendrequest('/index/indexTabbar').then(res => {
					if (res.code == 1) {
						this.indexTabbar = res.data;
					}
				})
			},
			// 下拉刷新
			downCallback(page) {
				this.mescroll.resetUpScroll()
			},
			gotowai(item) {
				this.$util.redirectTo(item.link)
				// #ifdef H5
				// window.location.href = item.link
				// #endif
				// #ifdef APP
				// plus.runtime.openURL(item.link);
				// #endif
			},
			//上拉加载
			upCallback(page) {
				this.$http.sendrequest('/task/TaskList', {
					page: page.num,
					page_size: page.size,
					name: ''
				}).then(res => {
					if (res.code == 1) {
						if (page.num == 1) this.taskList = []; //如果是第一页需手动制空列表
						this.taskList = this.taskList.concat(res.data.list);
						this.mescroll.endBySize(10, 10);
						if(this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			errimg(index) {
				this.categoryList[index].image = '../../static/img/02.webp'
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		background: $uni-content-background-color;
		padding-bottom: 100rpx;
		.swiper-content {
			margin: 0 30rpx;
			height: 300rpx;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 28rpx;
			.swiper {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
			swiper-item {
				text-align: center;
			}
		}
		.swiperBox {
			margin: 0 30rpx 30rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			color: #101010;
			font-size: 24rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 0px 2px 6px 0px rgba(225, 225, 225, 40);
			font-family: PingFangSC-regular;
			overflow: hidden;

			.icon-labagonggao-fill {
				color: $uni-tabbar-hovercolor;
				font-size: 38rpx;
				margin-right: 44rpx;
				margin-right: 20rpx;
			}
			.warning {
				width: 90%;
				.item {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;

					.text {
						font-size: 28rpx;
						width: 540rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
			.notice-text {
				width: 100%;
				height: 100%;
				/deep/.u-notice-bar {
					padding: 30rpx 0 !important;
				}
			}
		}

		.category {
			display: flex;
			flex-wrap: wrap;
			margin: 0 30rpx;

			.categoryItem {
				width: 214rpx;
				height: 112rpx;
				border-radius: 10px;
				margin: 0 24rpx 24rpx 0;
				position: relative;
				overflow: hidden;

				.box {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 99999;

					.categoryName {
						font-size: 28rpx;
						margin: 18rpx 0 6rpx 22rpx;
						font-family: PingFangSC-regular;
						font-weight: bold;
						color: #FFFFFF;
					}

					.categoryText {
						font-size: 24rpx;
						margin-left: 22rpx;
						font-weight: bold;
						font-family: PingFangSC-regular;
						opacity: .6;
					}

					.icon-wendang {
						font-size: 60rpx;
						position: absolute;
						right: 20rpx;
						bottom: 14rpx;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}

			}

			.categoryItem:nth-child(3n) {
				margin-right: 0;
			}

			.categoryHoverItem {
				width: 330rpx;
			}

			.categoryHoverItem:last-child {
				margin-right: 0;
			}
		}

		.taskTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 8rpx 30rpx 26rpx;

			.iconfont {
				color: $uni-tabbar-hovercolor;
				font-size: 48rpx;
			}

			.taskName {
				color: #333333;
				font-size: 16px;
				font-weight: bold;
				font-family: PingFangSC-medium;
			}
		}
	}

	/deep/ p {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.category-scroll {
		margin: 20rpx 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		white-space: nowrap; // 默认不换行；
		overflow: scroll;
		box-sizing: border-box;

		.categoryItem {
			width: 25%;
			text-align: center;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-bottom: 6rpx;
			}

			.categoryName {
				// width: 100rpx;
				// overflow: hidden; //超出的文本隐藏
				// text-overflow: ellipsis; //溢出用省略号显示
				// white-space: nowrap;  // 默认不换行；
				font-size: 26rpx;
				text-align: center;
			}
		}
	}

	.category-scroll::-webkit-scrollbar {
		width: 0;
	}
</style>